<template>
  <el-form label-width="80px">

    <el-form-item label="学号">
      <el-input type="text" v-model="studentDegree" placeholder="填写学生学号"></el-input>
    </el-form-item>

    <el-form-item label="学生姓名">
      <el-input type="text" v-model="name" placeholder="填写学生姓名"></el-input>
    </el-form-item>


    <el-form-item label="电话号码">
      <el-input type="text" v-model="tel" placeholder="填写学生电话" maxlength="11"></el-input>
    </el-form-item>

    <el-form-item label="所属院系">
      <el-select v-model="selectedDepartment" placeholder="请选择" @change="handleDepartmentChange">
        <el-option
          v-for="item in Departments"
          :key="item.label"
          :label="item.label"
          :value="item.department_ID"
        >
        </el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="所属专业">
      <el-select v-model="major_ID" placeholder="请选择" @change="handleMajorChange">
        <el-option
          v-for="item in filteredMajors"
          :key="item.label"
          :label="item.label"
          :value="item.major_ID"
        >
        </el-option>
      </el-select>
    </el-form-item>

    <el-form-item label="所属年级">
      <el-select v-model="grade" placeholder="请选择">
        <el-option
          v-for="item in setGrade"
          :key="item.label"
          :label="item.label"
          :value="item.label"
        >
        </el-option>
      </el-select>
    </el-form-item>


    <!-- 入校日期 -->
    <el-form-item label="入校日期">
      <el-date-picker
        v-model="time_enrollment"
        type="date"
        placeholder="选择日期">
      </el-date-picker>
    </el-form-item>

    <el-form-item label="性别">
      <el-select v-model="sex" placeholder="请选择">
        <el-option v-for="item in sexs" :key="item.label" :label="item.label" :value="item.label">
        </el-option>
      </el-select>
    </el-form-item>


    <el-form-item label="所在班级">
      <el-radio-group v-model="activeClass">
        <el-radio :value=item :key=item v-for="item in classList">{{ item }}班</el-radio>

      </el-radio-group>
    </el-form-item>

    
    <el-button type="primary" :icon="Check" @click="createSubmit">添加学生</el-button>
  </el-form>
</template>
<script setup>
import { ref  , computed , onMounted} from "vue";
import { ElMessage, valueEquals } from "element-plus";
import createStudent from "@/modules/student/create-student";
import { Check } from "@element-plus/icons-vue";

import { useStore  } from 'vuex';

// 使用 `useStore` 获取 Vuex 的 store 实例
const store = useStore();

let studentDegree = ref(""); //学生学号
let name = ref("");  // 姓名
let tel = ref(""); // 电话号码
let sex = ref("男"); // 默认性别
let grade = ref("2024") ; // 所属年级
let time_enrollment = ref(new Date());// 到校时间

// 性别选项
let sexs = ref([
  {
    label: "男",
  },
  {
    label: "女",
  },
]);

let classList = ref(['1','2','3']);  //班级列表

let activeClass = ref(""); // 当前班级

// 所属院系
const Departments =  computed(() => store.state.departments);

// 所属专业
const majors = computed(() => store.state.majors);

onMounted(() => {
  store.dispatch('loadDepartments');
  store.dispatch('loadMajors');
});

let selectedDepartment = ref("01"); // 默认选择第一个部门
let major_ID = ref(null); // 默认专业
let selectedMajorLabel = ref(""); //选中你专业名称
// 初始化选中的部门名称
let selectedDepartmentLabel = ref("交通管理系") ; 

// 监听 Departments 变化，更新选中的部门名称
computed(() => {
  selectedDepartmentLabel.value = Departments.value.length > 0 ? Departments.value[0].label : '';
});


// 所属年级
let setGrade = ref([
  { label: 2022, },
  { label: 2023, },
  { label: 2024, },
]);


// 选择院系
const handleDepartmentChange = (value) =>  {
  major_ID.value = '';
  selectedDepartment.value = value

  const selDepartment = Departments.value.find(dep => dep.department_ID === selectedDepartment.value);
  console.log('123131',selDepartment.label);
  if (selDepartment) {
    selectedDepartmentLabel.value = selDepartment.label;
  }
}

// 筛选出来的专业
const filteredMajors = computed(() => {
  return majors.value.filter(maj => maj.department_ID === selectedDepartment.value);
});

// 选择专业
const handleMajorChange = (value) =>{
  major_ID.value = value
  const selectedMajor = majors.value.find(major => major.major_ID === major_ID.value);
  if (selectedMajor) {
    selectedMajorLabel.value = selectedMajor.label;
  }
  console.log('+++',selectedMajor.label);
}



// 将成绩表和学生绑定
const createSubmit = () => {
  let telTest = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
  let nullTest = /^[\s\S]*.*[^\s][\s\S]*$/;
  let isCreate = nullTest.test(name.value) && nullTest.test(tel.value) && telTest.test(tel.value);
  let id = new Date().getFullYear() + new Date().getTime();

  console.log('majorID',major_ID , "marjorname", time_enrollment.value,);
  if (isCreate) {
    createStudent({
      studentId:!studentDegree.value && id,
      name: name.value,
      sex: sex.value,
      grade:grade.value,
      class: activeClass.value,
      major_ID : major_ID.value,
      major_Name : selectedMajorLabel.value,
      Department_ID : selectedDepartment.value,
      Department_Name : selectedDepartmentLabel.value,
      tel:tel.value,
      created_at : time_enrollment.value.toLocaleDateString()
    }).then(res => {
      ElMessage({
        message: `成功添加学生:${name.value},学号：${res.id}`,
        type: "success",
      });
      name.value = "";
      tel.value = "";
    });
  } else {
    ElMessage.warning({
      message: "请按照正确格式填写全部内容",
      type: "warning",
    });
  }
}
</script>
<style scoped lang="scss">
  .el-form-item {
    width: 500px;
    margin: 0px auto;
    margin-top: 30px;
  }
  .el-button {
    width: 400px;
    margin: 0px auto;
    margin-top: 30px;
    display: block;
  }
  .el-select {
    margin-top: 0px !important;
    margin-left: 0px !important;
  }
</style>
